<script lang="ts" setup></script>

<template>
  <TopImageTemplate>
    <el-container class="inner-max-box" direction="vertical">
      <span class="m-auto p-5 use-radius-sm bg-amber-500">
        以最简单的代码行，创造最复杂的故事。不仅仅只是编码，更是艺术。
      </span>
      <span class="flex p-5 mt-10 items-center w-full">
        <span class="flex w-1/2 border-b-8 border-dotted" />
        <span class="text-2xl w-32 text-center">背景颜色</span>
        <span class="flex w-1/2 border-b-8 border-dotted" />
        <SvgIcon name="paper-plane" parent-class="mb-3" svg-class="!size-8 rotate-[30deg]" />
      </span>
      <ColorStyle />
      <span class="flex p-5 mt-10 items-center w-full">
        <span class="flex w-1/2 border-b-8 border-dotted" />
        <span class="text-2xl w-32 text-center">点击效果</span>
        <span class="flex w-1/2 border-b-8 border-dotted" />
        <SvgIcon name="paper-plane" parent-class="mb-3" svg-class="!size-8 rotate-[30deg]" />
      </span>
      <MouseStyle />
    </el-container>
  </TopImageTemplate>
</template>

<style lang="scss">
.contrary-box {
  border-radius: 100% 0 0 100% / 100% 100% 0 0;
}
</style>
